<template>
  <div>
    <el-card>
      <el-button type="primary">添加用户</el-button>
    </el-card>

    <el-card style="margin: 15px 0">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
        <el-table-column>
            <template slot-scope="">
                <el-button icon="el-icon-plus" type="primary" size="mini" title="添加"></el-button>
                <el-button icon="el-icon-plus" type="danger" size="mini" title="编辑"></el-button>
            </template>
        </el-table-column>
      </el-table>

      <!-- 分页器 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="100"
        layout="sizes, prev, pager, next, ->, total, jumper"
        :total="30"
        style="text-align: center"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'usermanage',
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
  },
}
</script>

<style>
</style>
